<template>
    <div class="content-wrapper">
        <div class = "tag-wrapper">
            <el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick" @tab-remove="handlerTabRemove" closable class="active-tab-item-sign">
                <el-tab-pane v-for ="(item,index) in tabs" :label="item.label" :name="item.name" :key="item.name" ></el-tab-pane>
            </el-tabs>
        </div>
        <div class = "contentview-wrapper">
<!--            <el-scrollbar wrap-class="scrollbar-wrap" view-class="scrollbar-view">-->
                <transition name="fade-transform" mode="out-in">
                    <router-view :key="key" class="view-wrapper"></router-view>
                </transition>
<!--            </el-scrollbar>-->
         </div>
    </div>
</template>

<script>
    import {mapState, mapMutations} from 'vuex'
    export default {
        name: "Content",
        data() {
            return {}
        },
        computed: {
            ...mapState('main',['activeTab','tabs']),
            activeTab: {
                get() {
                    return this.$store.state.main.activeTab;
                },
                set(value) {
                    this.setActiveTab(value);
                }
            },
            key() {
                return this.$route.path;
            }
        },
        methods: {
            ...mapMutations('main',['setActiveTab','removeTabs']),
            handleTabClick(tab, event) {
                if(this.$route.name != tab.name) {
                    this.$router.push({name: tab.name});
                }
            },
            handlerTabRemove(tabName) {
                this.removeTabs(tabName);
                if(this.$route.name != this.activeTab) {
                    this.$router.push({name: this.activeTab});
                }
            }
        }
    }
</script>

<style scoped lang="less">
    @import '../../../../assets/css/main';
</style>
